<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>答题</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<!-- iphone safari -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<meta name="Author" contect="Mr.He"/>
<link rel="apple-touch-icon" size="72x72" href="images/icon.png"/>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" type="text/css" href="css/jqm-1.1.1.min.css">
<link rel="stylesheet" type="text/css" href="css/prodetail.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/tools.js"></script>
<script src="js/iscroll-lite.js"></script>
<script src="js/jqm-1.1.1.min.js"></script>
<script type="text/javascript">
    var proId = window.localStorage.getItem("proId")
    var questionIndex = 0;
    var resultMap = new Map();//结果
    var sign = window.localStorage.getItem("sign");
    var myScroll;
	
    $(document).ready(function (e) {
        if (sign) {
            alert("您已经完成该选题");
            window.localStorage.removeItem("sign");
            window.localStorage.removeItem("proId");
            window.location.href = "index.html"
        }
		$("#tapTest").live("taphold",function(){
			var pwd=prompt("Enter password");
			if(pwd=="c"){
				window.localStorage.removeItem("imgs");
			}
		}).live("click",function(){
			
		})
        $.getJSON("data.json", {}, function (data) { 
            $.each(data, function (i, items) {
                //遍历题库,根据第几题找到对应题目
                if (items.sign == proId * 1) {
                    //遍历该题目,显示题目
					var showHtml="";
                    $.each(items.data, function (o, quesItems) {
						
                        var displayClass = o != 0 ? "display:none" : "";
						//showDiv
						var showDiv=$("<div>").addClass("show").attr({"style":displayClass,"id":"quesId"+o});
						//topDiv
						var topDiv=$("<div>").addClass("top").html("<span>" + quesItems.questionSign + "</span>");
						topDiv.appendTo(showDiv);
						
						//contentDiv
						var contentDiv=$("<div>").addClass("content");
						//contentDiv questionDiv
						var questionDiv=$("<div>").addClass("questionDiv");
						questionDiv.appendTo(contentDiv);
						//contentDiv questionDiv table
						var tableCom='<table width="100%"><tr>' +
                                        '<td width="30" style="vertical-align:top; padding-top:9px;"><img src="images/selectPro/yellowPoint.png"/></td><td>' + quesItems.question + '</td></tr></table>';
							questionDiv.append(tableCom);
						//contentDiv radioDiv
						var radioDiv=$("<div>").addClass("radioDiv");
						
                        //遍历该题目,显示选项
                        if (quesItems.selectPro != null) {
                            $.each(quesItems.selectPro, function (j, selectItems) {
								//contentDiv radioDiv radioItemDiv
								var radioItemDiv=$("<div>");
								var radioImgs='<img src="images/selectPro/radioNormal.png" alt="' + selectItems.value + '"/><span>' +selectItems.value + ':' + selectItems.text + '</span>';
                                radioItemDiv.append(radioImgs);
								radioItemDiv.appendTo(radioDiv);
                            });
                        }
						radioDiv.appendTo(contentDiv);
						contentDiv.appendTo(showDiv);
						//bottomDiv 
						var bottomDiv=$("<div>").addClass("bottom");
						bottomDiv.appendTo(showDiv);
						showDiv.insertAfter($("#tapTest"));
                        //存入题目
                        resultMap.put(o, quesItems);
                    });
					//pageOptDiv
					var pageOptDiv=$("<div>").addClass("pageOpt");
					//pageOptDiv img1
					var img1=$("<img>").attr({"src":"images/selectPro/pre.png","id":"preBtn","style":"visibility:hidden"})
					img1.appendTo(pageOptDiv)
					//pageOptDiv img2
					var img2=$("<img>").attr({"src":"images/selectPro/next.png","id":"nextBtn"});
					img2.appendTo(pageOptDiv)
					//pageOptDiv img3
					var img3=$("<img>").attr({"src":"images/selectPro/complete.png","id":"completeBtn","style":"display:none"})
					img3.appendTo(pageOptDiv)
					
					pageOptDiv.insertAfter($("#score"));
                }
            });
        });
		$("#preBtn").live("click",function(){page(-1)})
		$("#nextBtn").live("click",function(){page(1)})
		
		$("#backBtn").live("click",function(){$("body").children().remove();window.location.href="index.html"})
		$("#completeBtn").live("click",function(){completeFn()})
		 //radioButton单选效果
		$(".radioDiv div").live("click",function(){
			$(this).parents(".radioDiv").children("div").children("img").attr("src", "images/selectPro/radioNormal.png")
        	$(this).children("img").attr("src", "images/selectPro/radioChecked.png");
		});
    });
    //翻题效果
    var page = function (opt) {
        //下一题验证
        //console.log(validataFn());
        if (validataFn() && opt == 1) {
            return;
        }
        //-1上一页操作;1下一页操作
        questionIndex += opt

        if ($("#quesId" + questionIndex).length > 0) { //有下一题/上一题
            //淡出上一题/下一题
            var calsIndex = questionIndex - opt;
            $("#quesId" + calsIndex).fadeOut("fast", function () {
                //淡入下一题/上一题
                $("#quesId" + questionIndex).fadeIn("slow");
            });
        }
        //非首页/非末页,还原按钮状态
        if ($("#quesId" + (questionIndex - opt)).length > 0) {
            $("#preBtn").css("visibility", "visible");
            $("#completeBtn").hide();
            $("#nextBtn").show();
        }
        switch (opt) {
            case -1:
                if ($("#quesId" + (questionIndex - 1)).length == 0) {
                    $("#preBtn").css("visibility", "hidden");
                }
                break;
            case 1:
                if ($("#quesId" + (questionIndex + 1)).length == 0) {
                    $("#nextBtn").hide();
                    $("#completeBtn").show();
                }
                break;
        }


    }
    //是否答题验证
    /**
     *@optBtnSign ("完成"和"下一题"验证区分)
     */
    var validataFn = function () {
        //找到当前显示的题
        var showDivs = $(".show");
        //当前题目未答,提示操作
        var flag = false;
        $.each(showDivs, function (index, items) {
            $(items).removeClass("shine_red")
            var quseName = $(items).children(".top").text();
            if (!$(items).is(":hidden") && quseName == "第二题") {
                var imgs = $(items).find(".radioDiv img");
                var srcAppend = "";
                $.each(imgs, function (j, imgItems) {
                    srcAppend += $(imgItems).attr("src");
                })
                if (srcAppend.indexOf("Checked", 0) == -1) {
                    $(items).addClass("shine_red");
                    flag = true;
                }
            }
        });
        return flag;
    }
    var intervalTime = null;
    //答题完成
    var completeFn = function () {
        //初始化iScroll
        initScroll();
		//标记已答该题
        window.localStorage.setItem("sign", 1);
        //获取结果集
        var resultSet = resultMap.entrys();
        //console.log(resultSet);
        $(".show").remove();
        $(".pageOpt").remove();
		//pageOptDiv
		var pageOptDiv=$("<div>").addClass("backDiv");
		//pageOptDiv img1
		var backImg=$("<img>").attr({"src":"images/selectPro/back.png","id":"backBtn"})
		backImg.appendTo(pageOptDiv);
		pageOptDiv.appendTo($(".show1"));
        $("#showResult").children().remove();
        var htmlContent="";
        //resultSet是已经获取的数据.现在要动态添加到id为showResult的Div中
        $.each(resultSet, function (index, items) {
            htmlContent += '<div class="questionDiv">' +
                    '<table width="100%"><tr>' +
                    '<td width="30" style=" vertical-align:top; padding-top:9px;"><img src="images/selectPro/yellowPoint.png"/></td>	' +
                    '<td>' + items.value.question + '</td></tr>' +
                    '<tr><td colspan="2" style=" color:red;padding-left:7%; font-size:18px;">' + items.value.solution + '</td></tr>' +
                    '</table>' +
                    '</div>';
        });
        $("#showResult").append(htmlContent);
		$(".show1").fadeIn("fast");
         myScroll.refresh();
    }
    /**
     * 初始化显示结果层的高度,iScroll渲染
     */
    var initScroll = function () {
        intervalTime = setInterval(function () {
            var resultContentH = $("#showResult").height();
            if (resultContentH > 0) {  //判断数据加载完成的条件
                console.log("此时showResult的高度是:" + resultContentH);
                $("#showResult").height(resultContentH)
                setTimeout(function () {
                    clearInterval(intervalTime);
                    myScroll = new iScroll('resultContent');
                }, 100)
            }
        }, 10);
    }
</script>
</head>

<body>
<div style="margin:0px auto;text-align: center" id="tapTest" onClick="javascript:window.location.href='index.html'"><img
        src="images/banner.png" width="100%"/></div>
<!-- class Result DIV display:none;-->
<div class="show1" style="display:none;" id="score">
    <div class="top"><span>以下是正确答案</span></div>
    <div id="resultContent" class="content resultContent" style="height:330px; overflow: hidden">
        <div id="showResult" class="showResult" >
        </div>
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>
